<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HTML | Element</title><meta name="keywords" content="HTML/CSS"><meta name="author" content="FHang"><meta name="copyright" content="FHang"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="description" content="HTML1.HTML的基本格式12345678&lt;!DOCTYPE html&gt;&lt;html&gt;	&lt;head&gt;		&lt;title&gt;…&lt;&#x2F;title&gt;	&lt;&#x2F;head&gt;	&lt;body&gt;	&lt;&#x2F;body&gt;&lt;&#x2F;html&gt; ​     ​     1234567891011121314151617181920212">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML">
<meta property="og:url" content="https://fhangh.gitee.io/article/2eec1551.html">
<meta property="og:site_name" content="Element">
<meta property="og:description" content="HTML1.HTML的基本格式12345678&lt;!DOCTYPE html&gt;&lt;html&gt;	&lt;head&gt;		&lt;title&gt;…&lt;&#x2F;title&gt;	&lt;&#x2F;head&gt;	&lt;body&gt;	&lt;&#x2F;body&gt;&lt;&#x2F;html&gt; ​     ​     1234567891011121314151617181920212">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_02.jpg">
<meta property="article:published_time" content="2020-11-05T08:41:27.507Z">
<meta property="article:modified_time" content="2021-10-04T09:34:44.347Z">
<meta property="article:author" content="FHang">
<meta property="article:tag" content="HTML&#x2F;CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_02.jpg"><link rel="shortcut icon" href="/fhangh/img/fh.png"><link rel="canonical" href="https://fhangh.gitee.io/article/2eec1551"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="yandex-verification" content="{&quot;theme_color&quot;:{&quot;enable&quot;:true,&quot;main&quot;:&quot;#49B1F5&quot;,&quot;paginator&quot;:&quot;#00c4b6&quot;,&quot;button_hover&quot;:&quot;#FF7242&quot;,&quot;text_selection&quot;:&quot;#00c4b6&quot;,&quot;link_color&quot;:&quot;#99a9bf&quot;,&quot;meta_color&quot;:&quot;#858585&quot;,&quot;hr_color&quot;:&quot;#A4D8FA&quot;,&quot;code_foreground&quot;:&quot;#F47466&quot;,&quot;code_background&quot;:&quot;rgba(27, 31, 35, .05)&quot;,&quot;toc_color&quot;:&quot;#00c4b6&quot;,&quot;blockquote_padding_color&quot;:&quot;#49b1f5&quot;,&quot;blockquote_background_color&quot;:&quot;#49b1f5&quot;}}"/><link rel="stylesheet" href="/fhangh/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css"><script>var GLOBAL_CONFIG = { 
  root: '/fhangh/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  ClickShowText: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"top-right"},
  justifiedGallery: {
    js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
    css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
};

var saveToLocal = {
  set: function setWithExpiry(key, value, ttl) {
    const now = new Date()
    const expiryDay = ttl * 86400000
    const item = {
      value: value,
      expiry: now.getTime() + expiryDay,
    }
    localStorage.setItem(key, JSON.stringify(item))
  },

  get: function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key)

    if (!itemStr) {
      return undefined
    }
    const item = JSON.parse(itemStr)
    const now = new Date()

    if (now.getTime() > item.expiry) {
      localStorage.removeItem(key)
      return undefined
    }
    return item.value
  }
}</script><script id="config_change">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-10-04 17:34:44'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(function () {  window.activateDarkMode = function () {
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
    }
  }
  window.activateLightMode = function () {
    document.documentElement.setAttribute('data-theme', 'light')
   if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
    }
  }
  const autoChangeMode = 'false'
  const t = saveToLocal.get('theme')
  if (autoChangeMode === '1') {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
    const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
    const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
    const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
    if (t === undefined) {
      if (isLightMode) activateLightMode()
      else if (isDarkMode) activateDarkMode()
      else if (isNotSpecified || hasNoSupport) {
        const now = new Date()
        const hour = now.getHours()
        const isNight = hour <= 6 || hour >= 18
        isNight ? activateDarkMode() : activateLightMode()
      }
      window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
        if (saveToLocal.get('theme') === undefined) {
          e.matches ? activateDarkMode() : activateLightMode()
        }
      })
    } else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else if (autoChangeMode === '2') {
    const now = new Date()
    const hour = now.getHours()
    const isNight = hour <= 6 || hour >= 18
    if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
    else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else {
    if (t === 'dark') activateDarkMode()
    else if (t === 'light') activateLightMode()
  }const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
   if (asideStatus === 'hide') {
     document.documentElement.classList.add('hide-aside')
   } else {
     document.documentElement.classList.remove('hide-aside')
   }
}})()</script><meta name="generator" content="Hexo 5.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="/fhangh/img/fh.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/fhangh/archives/"><div class="headline">文章</div><div class="length-num">26</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/fhangh/tags/"><div class="headline">标签</div><div class="length-num">10</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/fhangh/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/fhangh/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 列表</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/fhangh/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page" href="/fhangh/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page" href="/fhangh/Gallery/"><i class="fa-fw fas fa-images"></i><span> Image</span></a></li></ul></div></div></div></div><div id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN@master/Post_Img/postImg_02.png)"><nav id="nav"><span id="blog_name"><a id="site-name" href="/fhangh/">Element</a></span><span id="menus"><div id="search_button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/fhangh/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 列表</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/fhangh/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page" href="/fhangh/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page" href="/fhangh/Gallery/"><i class="fa-fw fas fa-images"></i><span> Image</span></a></li></ul></div></div><span class="close" id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></span></span></nav><div id="post-info"><h1 class="post-title">HTML</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-11-05T08:41:27.507Z" title="发表于 2020-11-05 16:41:27">2020-11-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-10-04T09:34:44.347Z" title="更新于 2021-10-04 17:34:44">2021-10-04</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/fhangh/categories/%E7%BC%96%E7%A8%8B/">编程</a></span></div><div class="meta-secondline"> <span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>13分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><h4 id="1-HTML的基本格式"><a href="#1-HTML的基本格式" class="headerlink" title="1.HTML的基本格式"></a>1.HTML的基本格式</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>…<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>​    </p>
<p>​    </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">标签：<span class="tag">&lt;<span class="name">title</span>&gt;</span>…<span class="tag">&lt;/<span class="name">title</span>&gt;</span> 位于<span class="tag">&lt;<span class="name">head</span>&gt;</span>…<span class="tag">&lt;/<span class="name">head</span>&gt;</span>之间，用于浏览器标题。</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>…<span class="tag">&lt;/<span class="name">p</span>&gt;</span>位于<span class="tag">&lt;<span class="name">body</span>&gt;</span>…<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">	用于段落位置</span><br><span class="line">		居中：<span class="tag">&lt;<span class="name">p</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		左对齐：<span class="tag">&lt;<span class="name">p</span> <span class="attr">align</span>=<span class="string">&quot;left&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		右对齐：<span class="tag">&lt;<span class="name">p</span> <span class="attr">align</span>=<span class="string">&quot;right&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">	不产生段落间距换行：<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">	预格式标记：<span class="tag">&lt;<span class="name">pre</span>&gt;</span>…<span class="tag">&lt;/<span class="name">pre</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">	文本标题：Dreamweaver 提供6种标准的标题样式</span><br><span class="line">		<span class="tag">&lt;<span class="name">h1</span>&gt;</span>…<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h2</span>&gt;</span>…<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h3</span>&gt;</span>…<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h4</span>&gt;</span>…<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h5</span>&gt;</span>…<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">h6</span>&gt;</span>…<span class="tag">&lt;/<span class="name">h6</span>&gt;</span></span><br><span class="line">		(从上到下依次由大变小)</span><br><span class="line">	</span><br><span class="line">	设置文本格式</span><br><span class="line">		可以设置字体：<span class="tag">&lt;<span class="name">font</span> <span class="attr">face</span>=<span class="string">&quot;字体&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line">		字号：<span class="tag">&lt;<span class="name">font</span> <span class="attr">size</span>=<span class="string">&quot;字体字号&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line">			1~7号字体为绝对大小；-4~+4为相对3号的缩小与放大。</span><br><span class="line">		颜色：<span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">&quot;字体颜色&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	设置文本样式</span><br><span class="line">		常用的格式化标记：</span><br><span class="line">			加粗：<span class="tag">&lt;<span class="name">b</span>&gt;</span>…<span class="tag">&lt;/<span class="name">b</span>&gt;</span>		<span class="tag">&lt;<span class="name">strong</span>&gt;</span>…<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">			斜体:<span class="tag">&lt;<span class="name">i</span>&gt;</span>…<span class="tag">&lt;<span class="name">i</span>&gt;</span>		<span class="tag">&lt;<span class="name">em</span>&gt;</span>…<span class="tag">&lt;/<span class="name">em</span>&gt;</span>    <span class="tag">&lt;<span class="name">cite</span>&gt;</span>…<span class="tag">&lt;/<span class="name">cite</span>&gt;</span></span><br><span class="line">			上标：<span class="tag">&lt;<span class="name">sup</span>&gt;</span>…<span class="tag">&lt;/<span class="name">sup</span>&gt;</span>		下标：<span class="tag">&lt;<span class="name">sub</span>&gt;</span>…<span class="tag">&lt;/<span class="name">sub</span>&gt;</span></span><br><span class="line">			下划线：<span class="tag">&lt;<span class="name">u</span>&gt;</span>…<span class="tag">&lt;/<span class="name">u</span>&gt;</span>		中划线：<span class="tag">&lt;<span class="name">s</span>&gt;</span>…<span class="tag">&lt;/<span class="name">s</span>&gt;</span></span><br><span class="line">			闪烁：<span class="tag">&lt;<span class="name">blink</span>&gt;</span>…/blink<span class="tag">&lt;&gt;</span>		</span><br></pre></td></tr></table></figure>
<h4 id="2-列表"><a href="#2-列表" class="headerlink" title="2.列表"></a>2.列表</h4><p>​    无序列表：位于<body>…</body>之间。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">li</span>&gt;</span>…<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">type值：<span class="tag">&lt;<span class="name">ul</span> <span class="attr">type</span>=<span class="string">&quot;disc&quot;</span>&gt;</span></span><br><span class="line">			   	<span class="tag">&lt;<span class="name">li</span>&gt;</span>…<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			   <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		disc(默认值)：实心圆</span><br><span class="line">		circle：空心圆</span><br><span class="line">		square:实心正方形</span><br><span class="line">		</span><br><span class="line">有序列表：</span><br><span class="line">	<span class="tag">&lt;<span class="name">ol</span>&gt;</span>…<span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">	type:<span class="tag">&lt;<span class="name">ol</span> <span class="attr">type</span>=<span class="string">&quot;l&quot;</span>&gt;</span></span><br><span class="line">		   <span class="tag">&lt;<span class="name">li</span>&gt;</span>…<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">		   <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	type:</span><br><span class="line">		l（默认）：1，2，3，4…</span><br><span class="line">		a: a, b, c, d…</span><br><span class="line">		A: A, B, C, D…</span><br><span class="line">		i: i, ii, iii, iv…</span><br><span class="line">		I: I, II, III, IV…</span><br></pre></td></tr></table></figure>
<h4 id="3-列表嵌套"><a href="#3-列表嵌套" class="headerlink" title="3.列表嵌套"></a>3.列表嵌套</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">无序中嵌入有序</span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">li</span>&gt;</span>…</span><br><span class="line">				<span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">li</span>&gt;</span>…<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">插入符号：</span><br><span class="line">	&amp;nbsp:空格	&amp;copy:版权	&amp;lt:小于号“<span class="tag">&lt;<span class="name">”</span>	&amp;<span class="attr">gt:</span>大于号“&gt;</span>”	&amp;quot:双引号“&quot;&quot;”</span><br><span class="line"></span><br><span class="line">水平线：<span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">hr</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span> <span class="attr">width</span>=<span class="string">&quot;200&quot;</span> <span class="attr">size</span>=<span class="string">&quot;5&quot;</span> <span class="attr">noshade</span>=<span class="string">&quot;noshade&quot;</span> <span class="attr">color</span>=<span class="string">&quot;#FF0000&quot;</span> <span class="attr">id</span>=<span class="string">&quot;line&quot;</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">		align:对齐方式	width:宽度（长度）	size:高度	color:颜色	noshade:阴影</span><br></pre></td></tr></table></figure>
<h4 id="4-文件头标签"><a href="#4-文件头标签" class="headerlink" title="4.文件头标签"></a>4.文件头标签</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">插入关键字<span class="tag">&lt;<span class="name">meta</span>&gt;</span>位于<span class="tag">&lt;<span class="name">head</span>&gt;</span>…<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;keywords&quot;</span> <span class="attr">content</span>=<span class="string">&quot;…&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">插入说明：对网页内容的详细说明</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;description&quot;</span> <span class="attr">content</span>=<span class="string">&quot;…,…&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">刷新：指网页的刷新时间或跳转至其他页面的功能</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;refresh&quot;</span> <span class="attr">content</span>=<span class="string">&quot;10&quot;</span>&gt;</span></span><br><span class="line">	一定时间后跳转至其他页面</span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;refresh&quot;</span> <span class="attr">content</span>=<span class="string">&quot;10;url=…网页地址…&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="5-使用图像"><a href="#5-使用图像" class="headerlink" title="5.使用图像"></a>5.使用图像</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">插入图像：<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;图片地址/图片名.jpg&quot;</span> <span class="attr">width</span>=<span class="string">&quot;600&quot;</span> <span class="attr">height</span>=<span class="string">&quot;404&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">地址：</span><br><span class="line">	绝对地址：文件所在具体位置</span><br><span class="line">	相对地址：与网页同一级目录</span><br><span class="line">	</span><br><span class="line">	例子：C &gt;&gt; user &gt;&gt; html &gt;&gt; photo &gt;&gt; p1.jpg</span><br><span class="line">							   p1.jpg                     p2.jpg</span><br><span class="line">			绝对地址：/photos/p1.jpg</span><br><span class="line">			相对地址：p1.jpg</span><br><span class="line">			</span><br><span class="line">图像属性</span><br><span class="line">	alt:<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot; &quot;</span> <span class="attr">alt</span>=<span class="string">&quot;…&quot;</span>/&gt;</span> 图像无法显示时，显示alt内容。</span><br><span class="line">	border:<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot; &quot;</span> <span class="attr">border</span>=<span class="string">&quot;…/&quot;</span>&gt;</span> 给图像加边。</span><br><span class="line">	align:<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot; &quot;</span> <span class="attr">align</span>=<span class="string">&quot;…/&quot;</span>&gt;</span> 给图像对齐。</span><br><span class="line">		align=&quot;right, left, top, bottom&quot;</span><br></pre></td></tr></table></figure>
<h4 id="6-vspace与hspace：设置水平，垂直边距。"><a href="#6-vspace与hspace：设置水平，垂直边距。" class="headerlink" title="6.vspace与hspace：设置水平，垂直边距。"></a>6.vspace与hspace：设置水平，垂直边距。</h4><p>​    </p>
<h4 id="7-网页背景图像"><a href="#7-网页背景图像" class="headerlink" title="7.网页背景图像"></a>7.网页背景图像</h4><p>​    </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">插入背景图像，位于<span class="tag">&lt;<span class="name">body</span>&gt;</span>…<span class="tag">&lt;/<span class="name">body</span>&gt;</span>中</span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">backgroup</span>=<span class="string">&quot;图片地址&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h4 id="8-网页背景音乐"><a href="#8-网页背景音乐" class="headerlink" title="8.网页背景音乐"></a>8.网页背景音乐</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">embed</span> <span class="attr">src</span>=<span class="string">&quot;音乐地址&quot;</span> <span class="attr">hidden</span>=<span class="string">&quot;true&quot;</span> <span class="attr">autostart</span>=<span class="string">&quot;true&quot;</span> <span class="attr">loop</span>=<span class="string">&quot;-1&quot;</span>&gt;</span></span><br><span class="line">当loop为-1或infinite时，播放次数为无限次。</span><br></pre></td></tr></table></figure>


<h4 id="9-设置背景图像不随页面滚动"><a href="#9-设置背景图像不随页面滚动" class="headerlink" title="9.设置背景图像不随页面滚动"></a>9.设置背景图像不随页面滚动</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">style</span>=<span class="string">&quot;backgroup-attachment=fixed&quot;</span>; <span class="attr">backgroup</span>=<span class="string">&quot;地址&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">backgroup-attachment=fixed为背景附加属性“固定”</span><br><span class="line">backgroup-position=center为背景位置设置为“中心”</span><br></pre></td></tr></table></figure>
<p>​    </p>
<h4 id="10-滚动标签：marquee"><a href="#10-滚动标签：marquee" class="headerlink" title="10.滚动标签：marquee"></a>10.滚动标签：marquee</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">marquee可以移动文字，图片，表格</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span>(默认向左滚动)</span><br><span class="line"></span><br><span class="line">滚动方向：direction</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">direction</span>=<span class="string">&quot;滚动方向&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line">	滚动方向:up, down, left, right</span><br><span class="line">	</span><br><span class="line">滚动方式：behavior</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">behavior</span>=<span class="string">&quot;方式&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line">	方式：scroll 循环（默认）</span><br><span class="line">			slide 滚动一次</span><br><span class="line">			alternate 交替滚动</span><br><span class="line">			</span><br><span class="line">滚动次数：loop</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">loop</span>=<span class="string">&quot;次数&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line"></span><br><span class="line">滚动速度：scrollamount</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">scrollamount</span>=<span class="string">&quot;速度&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line">	实际为每次滚动的移动长度，以像素为单位。</span><br><span class="line"></span><br><span class="line">滚动延迟：scrolldelay</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">scrolldelay</span>=<span class="string">&quot;时间间隔&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line">	“时间间隔”以毫秒为单位</span><br><span class="line">	</span><br><span class="line">滚动区域背景颜色:bgcolor</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">bgcolor</span>=<span class="string">&quot;颜色&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line">	&quot;颜色&quot;为十六进制码</span><br><span class="line"></span><br><span class="line">滚动背景宽度：width和高度：height</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">width</span>=<span class="string">&quot;宽度&quot;</span> <span class="attr">height</span>=<span class="string">&quot;高度&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line"></span><br><span class="line">设置空白空间hspace, vspace</span><br><span class="line"><span class="tag">&lt;<span class="name">marquee</span> <span class="attr">hspace</span>=<span class="string">&quot;水平范围&quot;</span> <span class="attr">vspace</span>=<span class="string">&quot;垂直范围&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h4 id="11-多媒体标签embed"><a href="#11-多媒体标签embed" class="headerlink" title="11.多媒体标签embed"></a>11.多媒体标签embed</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">embed可以插入各种多媒体</span><br><span class="line"><span class="tag">&lt;<span class="name">embed</span> <span class="attr">src</span>=<span class="string">&quot;地址&quot;</span> <span class="attr">loop</span>=<span class="string">&quot;true&quot;</span> <span class="attr">autostart</span>=<span class="string">&quot;true&quot;</span> <span class="attr">width</span>=<span class="string">&quot;宽度&quot;</span> <span class="attr">height</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>​    </p>
<h4 id="12-超链接的建立"><a href="#12-超链接的建立" class="headerlink" title="12.超链接的建立"></a>12.超链接的建立</h4><p>​        基础：每个网页都有唯一的地址，统称为资源定位符（URL）<br>​        </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">链接元素<span class="tag">&lt;<span class="name">a</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">	指定路径属性href</span><br><span class="line">		<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;链接地址&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">a</span> <span class="attr">name</span>=<span class="string">&quot;链接命名&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span> </span><br><span class="line">			title=&quot;给链接添加提示文字&quot;</span><br><span class="line">			target=&quot;指定链目标窗口&quot;</span><br><span class="line">			</span><br><span class="line">显示链接目标属性</span><br><span class="line">	<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;链接地址&quot;</span> <span class="attr">target</span>=<span class="string">&quot;目标窗口的打开方式&quot;</span>&gt;</span></span><br><span class="line">		方式：_blank打开一个新的窗口</span><br><span class="line">				_self在本窗口打开</span><br><span class="line">				_top在整个窗口中打开</span><br><span class="line">				_parent在父框架集中打开文档</span><br></pre></td></tr></table></figure>
<h4 id="13-设置不同的链接目标"><a href="#13-设置不同的链接目标" class="headerlink" title="13.设置不同的链接目标"></a>13.设置不同的链接目标</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">锚链接：</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#锚点名称&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;命名&quot;</span> <span class="attr">id</span>=<span class="string">&quot;锚点名称&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">设置图片超链接：<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;地址&quot;</span> <span class="attr">target</span>=<span class="string">&quot;方式&quot;</span>&gt;</span>…<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;地址&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">设置电子邮件链接：<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;mailto=邮箱地址&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h4 id="14-表格元素结构"><a href="#14-表格元素结构" class="headerlink" title="14.表格元素结构"></a>14.表格元素结构</h4><p>​    由行，列，单元格组成，表格标记table，行标记tr，单元格标记td<br>​        </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line">结构：表格<span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">table</span>&gt;</span>表格内容<span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">		行<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">tr</span>&gt;</span>行内容<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">		单元格<span class="tag">&lt;<span class="name">td</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">td</span>&gt;</span>单元格内容<span class="tag">&lt;/<span class="name">td</span>&gt;</span>:内容可为文字，图像，表单，甚至另一个表格</span><br><span class="line">			</span><br><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span>元素属性:</span><br><span class="line">	边框属性border(外边框)</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">&quot;边框宽度&quot;</span>&gt;</span></span><br><span class="line">	水平对齐属性align(用于表格在页面中的位置)</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">align</span>=<span class="string">&quot;对齐方式&quot;</span>&gt;</span></span><br><span class="line">			参数：left	左对齐</span><br><span class="line">			      center	居中</span><br><span class="line">			      right	右对齐</span><br><span class="line"></span><br><span class="line">	高度属性height</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">height</span>=<span class="string">&quot;表格高度&quot;</span>&gt;</span></span><br><span class="line">			高度可为像素，也可为百分比</span><br><span class="line">			</span><br><span class="line">	宽度属性width</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">width</span>=<span class="string">&quot;表格宽度&quot;</span>&gt;</span></span><br><span class="line">		宽度可为像素，百分比</span><br><span class="line">		</span><br><span class="line">	边框颜色属性bordercolor(边框宽度不为零)</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">&quot;边框宽度&quot;</span> <span class="attr">bordercolor</span>=<span class="string">&quot;边框颜色&quot;</span>&gt;</span></span><br><span class="line">		颜色为十六进制或英文名称</span><br><span class="line">		</span><br><span class="line">	边框亮边线属性</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">bordercolorlight</span>=<span class="string">&quot;亮边框的颜色&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">bordercolorlight</span>=<span class="string">&quot;暗边框的颜色&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	背景颜色属性bgcolor</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">bgcolor</span>=<span class="string">&quot;颜色&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	背景图片属性background(表格背景)</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">background</span>=<span class="string">&quot;图片地址&quot;</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">	单元格间距属性cellspacing</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">cellspacing</span>=<span class="string">&quot;单元格&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	单元格补白属性cellspadding</span><br><span class="line">		规定单元格边沿与其内容之间的空白</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">cellspadding</span>=<span class="string">&quot;单元补白属性&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	<span class="tag">&lt;<span class="name">tr</span>&gt;</span>元素的属性（行）</span><br><span class="line">		水平对齐属性align</span><br><span class="line">			<span class="tag">&lt;<span class="name">table</span> <span class="attr">align</span>=<span class="string">&quot;水平对齐方式&quot;</span>&gt;</span></span><br><span class="line">			方式：left(默认), center, right</span><br><span class="line">			</span><br><span class="line">		垂直对齐属性valign</span><br><span class="line">			<span class="tag">&lt;<span class="name">tr</span> <span class="attr">valign</span>=<span class="string">&quot;垂直对齐方式&quot;</span>&gt;</span></span><br><span class="line">			方式：top, middle, bottom</span><br><span class="line">			</span><br><span class="line">		行的背景颜色bgcolor</span><br><span class="line">			<span class="tag">&lt;<span class="name">tr</span> <span class="attr">bgcolor</span>=<span class="string">&quot;行的背景颜色&quot;</span>&gt;</span></span><br><span class="line">			只对行起作用，会覆盖表格背景</span><br><span class="line">		</span><br><span class="line">		行边框颜色</span><br><span class="line">			<span class="tag">&lt;<span class="name">tr</span> <span class="attr">bordercolor</span>=<span class="string">&quot;行边框颜色&quot;</span>&gt;</span></span><br><span class="line">			</span><br><span class="line">	<span class="tag">&lt;<span class="name">td</span>&gt;</span>元素的属性</span><br><span class="line">		宽度：<span class="tag">&lt;<span class="name">td</span> <span class="attr">width</span>=<span class="string">&quot;单元格宽度&quot;</span>&gt;</span></span><br><span class="line">		高度：<span class="tag">&lt;<span class="name">td</span> <span class="attr">height</span>=<span class="string">&quot;单元格高度&quot;</span>&gt;</span></span><br><span class="line">		指定单元格背景色：<span class="tag">&lt;<span class="name">td</span> <span class="attr">bgcolor</span>=<span class="string">&quot;颜色&quot;</span>&gt;</span></span><br><span class="line">		指定单元格背景图：<span class="tag">&lt;<span class="name">td</span> <span class="attr">background</span>=<span class="string">&quot;图片地址&quot;</span>&gt;</span></span><br><span class="line">		指定水平对齐：<span class="tag">&lt;<span class="name">td</span> <span class="attr">align</span>=<span class="string">&quot;水平对齐&quot;</span>&gt;</span>    方式：left, center, right</span><br><span class="line">		指定垂直对齐：<span class="tag">&lt;<span class="name">td</span> <span class="attr">valign</span>=<span class="string">&quot;垂直对齐&quot;</span>&gt;</span>    方式：top, middle, bottom</span><br><span class="line">		指定单元格边框颜色：<span class="tag">&lt;<span class="name">td</span> <span class="attr">border</span>=<span class="string">&quot;颜色&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	合并列表属性colspan(跨列)    rowspan(跨行)</span><br><span class="line">		<span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">&quot;跨列数&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">td</span> <span class="attr">rowspan</span>=<span class="string">&quot;跨行数&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	表格标题：位于<span class="tag">&lt;<span class="name">table</span>&gt;</span>…<span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">caption</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">caption</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	表格框架简例：</span><br><span class="line">		<span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">&quot;&quot;</span> <span class="attr">width</span>=<span class="string">&quot;&quot;</span> <span class="attr">cellspacing</span>=<span class="string">&quot;&quot;</span> <span class="attr">cellsapdding</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">td</span>&gt;</span>…<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	内联框架：</span><br><span class="line">		<span class="tag">&lt;<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">&quot;地址&quot;</span> <span class="attr">width</span>=<span class="string">&quot;&quot;</span> <span class="attr">height</span>=<span class="string">&quot;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="15-多媒体"><a href="#15-多媒体" class="headerlink" title="15.多媒体"></a>15.多媒体</h4><p>​            </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">Flash 是矢量的Web交互动画制作工具，Dreamweaver提供了使用Flash对象的功能。</span><br><span class="line"></span><br><span class="line">Flash动画</span><br><span class="line">	Dreamweaver &gt;&gt; 插入 &gt;&gt; 媒体 &gt;&gt; SWF命令</span><br><span class="line">	选择要插入的&quot;.swf&quot;的动画文件，得到Flash占位符。可在 属性面板中进行属性设置。</span><br><span class="line">	</span><br><span class="line">透明Flash动画</span><br><span class="line">	新建一个“网页”，在“外观CSS分类”中添加“背景图像”</span><br><span class="line">	插入“.swf”后，在属性中Wmode中选择“透明”</span><br><span class="line"></span><br><span class="line">FlashPaper</span><br><span class="line">	原理是FlashPaper虚拟机打印可打印的文档转换为SWF或PDF。</span><br><span class="line">	</span><br><span class="line">Flash视频</span><br><span class="line">	Flash视频即为FLV流媒体格式的视频</span><br><span class="line">	选择“插入” &gt;&gt; “媒体” &gt;&gt; “FLV”</span><br><span class="line">	“视频类型”：累进式下载视频，先将FLV文件下载到访问者的硬盘，然后再播放。</span><br><span class="line">	流视频：进行一段缓冲时间后才在网页上播放视频内容。</span><br><span class="line"></span><br><span class="line">插入shockwave影片</span><br><span class="line">	插入 &gt;&gt; 媒体 &gt;&gt; shockwave</span><br><span class="line">	打开“选择文件”，选择&quot;.dcr&quot;, &quot;.dir&quot;, &quot;.dxr&quot;</span><br><span class="line"></span><br><span class="line">插入Applet</span><br><span class="line">	Applet用Java编程语言开发的，可嵌入Web页中的小型应用程序</span><br><span class="line">	插入 &gt;&gt; 媒体 &gt;&gt; Applet命令 &gt;&gt;  &quot;.class&quot;</span><br><span class="line">	</span><br><span class="line">插入ActiveX控件</span><br><span class="line">	ActiveX是可以在浏览器中充当插入，可重复使用：插入 &gt;&gt; 媒体 &gt;&gt; ActiveX</span><br><span class="line">	在属性面板中“class ID”插入视频，参数内可控制播放参数。</span><br><span class="line">	<span class="tag">&lt;<span class="name">param</span> <span class="attr">name</span>=<span class="string">&quot;AutoRewind&quot;</span> <span class="attr">value</span>=<span class="string">&quot;true&quot;</span>&gt;</span>    播放完回到开始</span><br><span class="line">	&quot;FileName&quot;	设置视频文件</span><br><span class="line">	&quot;ShowControls&quot;	控制条</span><br><span class="line">	&quot;ShowPositionControls&quot;	快进/快退</span><br><span class="line">	&quot;ShowAudioControls&quot;	音频调节</span><br><span class="line">	&quot;ShowTracker&quot;	播放条</span><br><span class="line">	&quot;ShowDisplay&quot;	播放列表</span><br><span class="line">	&quot;ShowStatusBar&quot;	状态栏</span><br><span class="line">	&quot;ShowCaptioning&quot;	字幕</span><br><span class="line">	&quot;AutoStart&quot;	自动播放</span><br><span class="line">	&quot;Volume&quot;	音量</span><br><span class="line">	&quot;AllowChangeDisplaySize&quot;	允许改变显示尺寸</span><br><span class="line">	&quot;EnableContextMenu&quot;	显示右键菜单</span><br><span class="line">	&quot;Windowless Video&quot;	双击鼠标切换全屏</span><br><span class="line"></span><br><span class="line">插入音频</span><br><span class="line">	</span><br><span class="line">	通过<span class="tag">&lt;<span class="name">bgsound</span>&gt;</span>标签添加背景音乐</span><br><span class="line">	<span class="tag">&lt;<span class="name">embed</span>&gt;</span>添加音乐播放器</span><br><span class="line">		</span><br><span class="line">		设置背景音乐，用于<span class="tag">&lt;<span class="name">body</span>&gt;</span>…<span class="tag">&lt;/<span class="name">body</span>&gt;</span>之间</span><br><span class="line">		&quot;<span class="tag">&lt;<span class="name">bgsound&quot;后按空格出现属性：</span></span></span><br><span class="line"><span class="tag">			<span class="attr">balance</span>	设置左右对齐</span></span><br><span class="line"><span class="tag">			<span class="attr">delay</span>	设置播放延时</span></span><br><span class="line"><span class="tag">			<span class="attr">loop</span>	设置循环次数，当<span class="attr">loop</span>=<span class="string">-1，表示无限循环</span></span></span><br><span class="line"><span class="tag">			<span class="attr">volume</span>	设置音乐音量</span></span><br><span class="line"><span class="tag">			<span class="attr">src</span>	文件地址</span></span><br><span class="line"><span class="tag">	</span></span><br><span class="line"><span class="tag">	设置音乐播放器</span></span><br><span class="line">		&lt;embed src=&quot;地址&quot; …&gt;</span><br><span class="line"></span><br><span class="line">滚动字幕</span><br><span class="line">	<span class="tag">&lt;<span class="name">marquee</span>&gt;</span>…<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span></span><br><span class="line">	&quot;<span class="tag">&lt;<span class="name">marquee&quot;后空格可以选择属性：</span></span></span><br><span class="line"><span class="tag">		<span class="attr">behavior</span>	滚动方式 ：</span></span><br><span class="line"><span class="tag">			<span class="attr">alternate</span> 文本左右滚动</span></span><br><span class="line"><span class="tag">			<span class="attr">scroll</span> 循环滚动</span></span><br><span class="line"><span class="tag">			<span class="attr">slide</span> 滚动后固定</span></span><br><span class="line"><span class="tag">		<span class="attr">bgcolor</span>	背景色</span></span><br><span class="line"><span class="tag">		<span class="attr">direction</span>	滚动方向：</span></span><br><span class="line"><span class="tag">			<span class="attr">up</span> </span></span><br><span class="line"><span class="tag">			<span class="attr">down</span> </span></span><br><span class="line"><span class="tag">			<span class="attr">left</span> </span></span><br><span class="line"><span class="tag">			<span class="attr">right</span></span></span><br><span class="line"><span class="tag">		<span class="attr">height</span> 滚动效果的高度	<span class="attr">width</span> 宽度</span></span><br><span class="line"><span class="tag">		<span class="attr">loop</span>	循环次数</span></span><br><span class="line"><span class="tag">		<span class="attr">scrollamount</span>	滚动延迟时间</span></span><br><span class="line"><span class="tag">		<span class="attr">hspace</span> 水平范围	<span class="attr">vspace</span> 垂直范围</span></span><br></pre></td></tr></table></figure>
<h4 id="16-使用框架"><a href="#16-使用框架" class="headerlink" title="16.使用框架"></a>16.使用框架</h4><p>​    概述：可以在同一浏览器窗口中显示多个不同的文件，常用于左侧和上侧的区域设置为目录区和导航条，内部有超链，用于方便浏览其他的网页。<br>​    </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">创建框架</span><br><span class="line">	<span class="tag">&lt;<span class="name">frameset</span>&gt;</span>和<span class="tag">&lt;<span class="name">frame</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">frameset</span> <span class="attr">cols</span>=<span class="string">&quot;96,*&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">&quot;left.html&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">frame</span> <span class="attr">rows</span>=<span class="string">&quot;59,572&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">&quot;top.html&quot;</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">&quot;main.html&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">	<span class="tag">&lt;<span class="name">frame</span>&gt;</span>只存在于<span class="tag">&lt;<span class="name">frameset</span>&gt;</span>中，用于链接URL</span><br><span class="line">		以像素为单位，也可取百分比：cols:框架的列数 rows:框架的行数</span><br><span class="line">		“*”：表示框架占剩余未被定义的空间</span><br><span class="line"></span><br><span class="line">浮动框架</span><br><span class="line">	<span class="tag">&lt;<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">&quot;地址&quot;</span> <span class="attr">name</span>=<span class="string">&quot;…&quot;</span> <span class="attr">width</span>=<span class="string">&quot;…&quot;</span> <span class="attr">height</span>=<span class="string">&quot;… align=&quot;</span>…&quot; <span class="attr">scrolling</span>=<span class="string">&quot;yes/no&quot;</span> <span class="attr">frameborder</span>=<span class="string">&quot;…&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">frame</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">	name:框架标识名</span><br><span class="line">	scrolling:是否出现滚动条</span><br><span class="line">	frameborder:边框</span><br><span class="line">	</span><br><span class="line">	<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;地址&quot;</span> <span class="attr">target</span>=<span class="string">&quot;…&quot;</span>&gt;</span>…<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">	target结合name使用</span><br></pre></td></tr></table></figure>

<p>​<br>​<br>​    </p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">FHang</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fhangh.gitee.io/article/2eec1551.html">https://fhangh.gitee.io/article/2eec1551.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fhangh.gitee.io" target="_blank">Element</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/fhangh/tags/HTML-CSS/">HTML/CSS</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_02.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/fhangh/article/229dff60.html"><img class="prev-cover" data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_06.jpg" onerror="onerror=null;src='/fhangh/img/404.jpg'"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">不同虚拟机的配置方式</div></div></a></div><div class="next-post pull-right"><a href="/fhangh/article/ee69e452.html"><img class="next-cover" data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_04.jpg" onerror="onerror=null;src='/fhangh/img/404.jpg'"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">CSS</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/fhangh/article/ee69e452.html" title="CSS"><img class="cover" data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_04.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-05</div><div class="title">CSS</div></div></a></div></div></div></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="/fhangh/img/fh.png" onerror="this.onerror=null;this.src='/fhangh/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">FHang</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/fhangh/archives/"><div class="headline">文章</div><div class="length-num">26</div></a></div><div class="card-info-data-item is-center"><a href="/fhangh/tags/"><div class="headline">标签</div><div class="length-num">10</div></a></div><div class="card-info-data-item is-center"><a href="/fhangh/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/FHangH"><i class="fab fa-github"></i><span>Link To</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/FHangH" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:752972182@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div></div><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">个人学习笔记</div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="card-content"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML"><span class="toc-number">1.</span> <span class="toc-text">HTML</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-HTML%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%BC%E5%BC%8F"><span class="toc-number">1.0.0.1.</span> <span class="toc-text">1.HTML的基本格式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%88%97%E8%A1%A8"><span class="toc-number">1.0.0.2.</span> <span class="toc-text">2.列表</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%88%97%E8%A1%A8%E5%B5%8C%E5%A5%97"><span class="toc-number">1.0.0.3.</span> <span class="toc-text">3.列表嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%87%E4%BB%B6%E5%A4%B4%E6%A0%87%E7%AD%BE"><span class="toc-number">1.0.0.4.</span> <span class="toc-text">4.文件头标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E4%BD%BF%E7%94%A8%E5%9B%BE%E5%83%8F"><span class="toc-number">1.0.0.5.</span> <span class="toc-text">5.使用图像</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-vspace%E4%B8%8Ehspace%EF%BC%9A%E8%AE%BE%E7%BD%AE%E6%B0%B4%E5%B9%B3%EF%BC%8C%E5%9E%82%E7%9B%B4%E8%BE%B9%E8%B7%9D%E3%80%82"><span class="toc-number">1.0.0.6.</span> <span class="toc-text">6.vspace与hspace：设置水平，垂直边距。</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E5%9B%BE%E5%83%8F"><span class="toc-number">1.0.0.7.</span> <span class="toc-text">7.网页背景图像</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E7%BD%91%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90"><span class="toc-number">1.0.0.8.</span> <span class="toc-text">8.网页背景音乐</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E8%AE%BE%E7%BD%AE%E8%83%8C%E6%99%AF%E5%9B%BE%E5%83%8F%E4%B8%8D%E9%9A%8F%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8"><span class="toc-number">1.0.0.9.</span> <span class="toc-text">9.设置背景图像不随页面滚动</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-%E6%BB%9A%E5%8A%A8%E6%A0%87%E7%AD%BE%EF%BC%9Amarquee"><span class="toc-number">1.0.0.10.</span> <span class="toc-text">10.滚动标签：marquee</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-%E5%A4%9A%E5%AA%92%E4%BD%93%E6%A0%87%E7%AD%BEembed"><span class="toc-number">1.0.0.11.</span> <span class="toc-text">11.多媒体标签embed</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-%E8%B6%85%E9%93%BE%E6%8E%A5%E7%9A%84%E5%BB%BA%E7%AB%8B"><span class="toc-number">1.0.0.12.</span> <span class="toc-text">12.超链接的建立</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-%E8%AE%BE%E7%BD%AE%E4%B8%8D%E5%90%8C%E7%9A%84%E9%93%BE%E6%8E%A5%E7%9B%AE%E6%A0%87"><span class="toc-number">1.0.0.13.</span> <span class="toc-text">13.设置不同的链接目标</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E8%A1%A8%E6%A0%BC%E5%85%83%E7%B4%A0%E7%BB%93%E6%9E%84"><span class="toc-number">1.0.0.14.</span> <span class="toc-text">14.表格元素结构</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15-%E5%A4%9A%E5%AA%92%E4%BD%93"><span class="toc-number">1.0.0.15.</span> <span class="toc-text">15.多媒体</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-%E4%BD%BF%E7%94%A8%E6%A1%86%E6%9E%B6"><span class="toc-number">1.0.0.16.</span> <span class="toc-text">16.使用框架</span></a></li></ol></li></ol></li></ol></li></ol></div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/3fadb38f.html" title="UE4联网和多人游戏"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_27.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4联网和多人游戏"/></a><div class="content"><a class="title" href="/fhangh/article/3fadb38f.html" title="UE4联网和多人游戏">UE4联网和多人游戏</a><time datetime="2022-05-26T14:04:45.432Z" title="发表于 2022-05-26 22:04:45">2022-05-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/7dd18469.html" title="UE4 RPC"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_26.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4 RPC"/></a><div class="content"><a class="title" href="/fhangh/article/7dd18469.html" title="UE4 RPC">UE4 RPC</a><time datetime="2022-05-19T04:30:00.826Z" title="发表于 2022-05-19 12:30:00">2022-05-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/cb9854b2.html" title="UE4 MySQL插件使用"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_25.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4 MySQL插件使用"/></a><div class="content"><a class="title" href="/fhangh/article/cb9854b2.html" title="UE4 MySQL插件使用">UE4 MySQL插件使用</a><time datetime="2022-03-27T06:49:30.840Z" title="发表于 2022-03-27 14:49:30">2022-03-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/605bd1ac.html" title="UE4 MySQL插件开发"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_24.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4 MySQL插件开发"/></a><div class="content"><a class="title" href="/fhangh/article/605bd1ac.html" title="UE4 MySQL插件开发">UE4 MySQL插件开发</a><time datetime="2022-03-26T07:56:25.807Z" title="发表于 2022-03-26 15:56:25">2022-03-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/f7ede91d.html" title="Java基础"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_19.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="Java基础"/></a><div class="content"><a class="title" href="/fhangh/article/f7ede91d.html" title="Java基础">Java基础</a><time datetime="2021-12-12T07:47:44.788Z" title="发表于 2021-12-12 15:47:44">2021-12-12</time></div></div></div></div></div></div></div></main><footer id="footer" style="background-image: url(https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN@master/Post_Img/postImg_02.png)"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By FHang</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/fhangh/js/utils.js"></script><script src="/fhangh/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/fhangh/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> {preloader.endLoading()})</script><div class="js-pjax"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="true"></script></div></body></html>